<template>
  <div class="goods-list-container">
    <div class="header">
      <h2>商品列表</h2>
    </div>
  </div>
 <div class="search-commodity-container">
    <!-- 搜索区域 -->
    <div class="search-section">
      <div class="search-row">
        <span class="search-label">关键词</span>
        <el-input
          v-model="searchKeyword"
          placeholder="请输入搜索的关键词..."
          class="search-input"
          size="default"
          clearable
        />
        <span class="search-label">分类</span>
        <el-select
          v-model="selectedCategory"
          placeholder="请选择分类"
          class="category-select"
          size="default"
          clearable
        >
          <el-option
            v-for="item in categoryOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button type="primary" size="default" @click="handleSearch">搜索</el-button
        >
      </div>
    </div>
  </div>

  <el-table :data="goodsData" style="width: 100%;text-align: center;" class="shanpinlist" >
    <el-table-column fixed prop="proid" label="商品ID" width="200" />
    <el-table-column prop="proname" label="名称" width="180" />
    <el-table-column prop="img1" label="图片" width="180">
      <template #default="scope">
        <div class="demo-image__preview">
          <el-image style="width: 100px; height: 100px" :src="scope.row.img1" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
            show-progress :initial-index="4" fit="cover"  :preview-src-list="scope.row.imgs"
            :preview-teleported="true"/>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="category" label="商品分类" width="80" />
    <el-table-column prop="desc" label="介绍" width="200" />
    <el-table-column prop="originprice" label="价格" width="80" />
    <el-table-column prop="stock" label="库存" width="100" />
    <el-table-column fixed="right" label="操作" min-width="140">
      <template #default>
        <el-button link type="primary" size="small" @click="handleClick">
          编辑
        </el-button>
        <el-button link type="primary" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

</template>

<script setup lang="ts">
import { ref } from 'vue'
// import { ElMessage } from 'element-plus'
import { productListRequest, type Iproduct } from '@/api/statistic'
// 商品数据
const goodsData = ref<Iproduct[]>([])

async function list() {
  const arr = await productListRequest({
    count: 1,
    limitNum: 10,
    search: "",
    category: ""
  })
  console.log(arr.data)
  goodsData.value = arr.data.data
}
list();

const handleClick = () => {
  console.log('click')
}


</script>

<style lang="scss" scoped>
.goods-list-container {
  padding: 20px;
  background-color: #fff;
  height: 10vh;
  overflow: hidden;
  box-sizing: border-box;


  .header {
    margin-bottom: 20px;

    h2 {
      font-size: 24px;
      font-weight: 600;
      color: #333;
      margin: 0;
    }
  }
}

.demo-image__error .image-slot {
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
.el-table__header-wrapper{
  text-align: center;
}
.search-commodity-container {
  padding: 20px;
  background-color: #fff;

  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  .search-section {
    margin-bottom: 20px;
    padding: 25px;
    background-color: #f8f9fa;
    border-radius: 8px;

    .search-row {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;

      .search-label {
        font-weight: 600;
        color: #333;
        white-space: nowrap;
        font-size: 14px;
      }

      .search-input {
        width: 320px;

        :deep(.el-input__wrapper) {
          height: 36px;
          min-height: 36px;
          padding: 6px 12px;
          border-radius: 6px;
          box-shadow: 0 0 0 1px #dcdfe6 inset;

          &:hover {
            box-shadow: 0 0 0 1px #c0c4cc inset;
          }

          &.is-focus {
            box-shadow: 0 0 0 1px #409eff inset;
          }
        }

        :deep(.el-input__inner) {
          height: 22px;
          line-height: 22px;
          font-size: 14px;
        }
      }

      .category-select {
        width: 180px;

        :deep(.el-select__wrapper) {
          height: 36px;
          min-height: 36px;
          padding: 6px 12px;
          border-radius: 6px;
          box-shadow: 0 0 0 1px #dcdfe6 inset;

          &:hover {
            box-shadow: 0 0 0 1px #c0c4cc inset;
          }

          &.is-focus {
            box-shadow: 0 0 0 1px #409eff inset;
          }
        }

        :deep(.el-select__selection) {
          height: 22px;
          line-height: 22px;
        }

        :deep(.el-select__selected-item) {
          font-size: 14px;
          line-height: 22px;
        }

        :deep(.el-select__placeholder) {
          font-size: 14px;
          line-height: 22px;
        }
      }

      .el-button {
        height: 36px;
        padding: 8px 20px;
        font-size: 14px;
        font-weight: 500;
        border-radius: 6px;
        border: none;

        &.el-button--primary {
          background: linear-gradient(135deg, #409eff 0%, #3a8ee6 100%);
          box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);

          &:hover {
            background: linear-gradient(135deg, #66b1ff 0%, #409eff 100%);
            box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
            transform: translateY(-1px);
          }

          &:active {
            transform: translateY(0);
            box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
          }
        }
      }
    }
  }
}
</style>
